<template>
  <h3 v-if="!token">请登录</h3>

<div v-else>
  <el-card>
    <el-avatar src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F5%2Fdef6ed04-6d34-402e-99c8-366266f627dd.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655986272&t=e759c893f042485722191f9f77a43b08"></el-avatar>
  </el-card>

  <el-card class="userInfo">
    <div class="userInfo_header">
      <h3>信息</h3>
      <p class="edit" @click="editUserInfo">编辑</p>
    </div>
    <div>
      <p> <span>昵称</span> | <span> {{ userInfo1.nickname }} </span></p>
      <p> <span>邮箱</span> | <span>{{ userInfo1.email }}</span></p>
      <p> <span>个人简介</span> | <span>{{ userInfo1.personalized_signature }}</span></p>
      <p> <span>所在地区</span> | <span>中国</span></p>
      <p> <span>注册时间</span> | <span>{{ userInfo1.create_time}}</span></p>
    </div>
  </el-card>

  <el-dialog
      v-model="dialogVisible"
      title="修改信息"
      width="50%"
  >

    <el-form>
      <el-form-item label="昵称">
        <el-input v-model="userInfoForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="userInfoForm.avatar" :src="userInfoForm.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="userInfoForm.personalized_signature"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userInfoForm.email"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"  @click="submitUserInfo"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {getUserInfo, userInfo} from "../../api/userInfo";

let token=localStorage.getItem('token')


let dialogVisible=ref(false)

const userInfoForm=reactive({
    nickname:'',
    personalized_signature:'',
    email:'',
    avatar:'',
})
let userInfo1=reactive({
    nickname:'',
    personalized_signature:'',
    email:'',
    avatar:'',
    create_time:''
})

// 切换编辑页面的展示状态
const editUserInfo = () => {
  dialogVisible.value=true
}

const name=localStorage.getItem('user_info')

// 编辑完用户信息后，向后台提交
const  submitUserInfo = async () => {

  dialogVisible.value = false

  await userInfo(userInfoForm,name).then(res=>{
          // console.log('user:', res)
          ElMessage.success('更改信息成功！')
  });
  await getUserInfo(name).then(res=>{
          userInfo1.nickname=res.data[0].nickname
          userInfo1.email=res.data[0].email
          userInfo1.personalized_signature=res.data[0].personalized_signature
          userInfo1.create_time=res.data[0].create_time
  })
}

onMounted(()=>{
    getUserInfo(name).then(res=>{
      userInfo1.nickname=res.data[0].nickname
      userInfo1.email=res.data[0].email
      userInfo1.personalized_signature=res.data[0].personalized_signature
      userInfo1.create_time=res.data[0].create_time
      userInfo1.avatar=res.data[0].avatar
    })
})

// 图片上传
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  userInfoForm.avatar = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10 ) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<style scoped>
.userInfo{
  margin-top: 10px;
}
.userInfo_header{
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.edit{
  color: dodgerblue;
  cursor: pointer;
}

li{
  list-style: none;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}


</style>